<template>
	<view class="news-detail">
		<!-- 主图 -->
		<image :src="$baseUrl(newsDetail.newimage)" mode="aspectFit" class="main-image"></image>

		<!-- 新闻标题 -->
		<view class="title">{{ newsDetail.title }}</view>

		<!-- 富文本内容 -->
		<rich-text :nodes="newsDetail.maincontent"></rich-text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsDetail: {
					mainImage: 'https://example.com/news-image.jpg', // 替换为实际的新闻主图URL
					title: '这是一个新闻标题', // 替换为实际的新闻标题
					content: '<div style="font-size: 16px; color: #000;">这是一个富文本内容示例。<p>你可以在这里添加更多的HTML标签来丰富内容，比如<a href="https://example.com">链接</a>。</p></div>' // 替换为实际的富文本内容
				},
				id: ''
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}

		},
		onShow() {
			this.fetchNewsDetail();
			this.addClicks()
		},
		methods: {
			fetchNewsDetail(id) {
				// 模拟网络请求，实际使用时请替换为你的API接口
				this.$request("/addons/qingdong/news/getNewsInfo", "GET", {
					id: this.id
				}).then(res => {
					this.newsDetail = res.data
					this.newsDetail.maincontent = this.$repairRichText(res.data.maincontent)
				})
			},
			addClicks() {
				this.$request("/addons/qingdong/news/addClicks", "POST", {
					id: this.id
				}).then(res => {})
			}
		}
	};
</script>

<style>
	.news-detail {
		padding: 20px;
	}

	image {
		max-width: 100vw;
	}

	.main-image {
		width: 100%;
		height: auto;
		display: block;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}
</style>